<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>用户信息列表</title>
		<script src="js/global.js"></script>
	</head>

	<body>
		<!-- 表单搜素 -->
		<div class="layui-form-item">
			<form class="layui-form">
				<div class="layui-inline">
					<label class="layui-form-label">用户名</label>
					<div class="layui-input-inline" style="width: 120px;">
						<input type="text" name="loginName" id="loginName" autocomplete="off" placeholder="用户名" class="layui-input">
					</div>
				</div>
				<div class="layui-inline">
					<label class="layui-form-label">起止时间</label>
					<div class="layui-input-inline" style="width: 100px;">
						<input type="text" name="beginTime" id="beginTime" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
					</div>
					<div class="layui-form-mid">-</div>
					<div class="layui-input-inline" style="width: 100px;">
						<input type="text" name="endTime" id="endTime" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
					</div>
				</div>
				<div class="layui-inline">
					<label class="layui-form-label">是否锁定</label>
					<div class="layui-input-inline" style="width: 100px;">
						<select name="isLockout" id="isLockout" class="layui-select">
							<option value="">请选择</option>
							<option value="是">是</option>
							<option value="否">否</option>
						</select>
					</div>
				</div>
				<div class="layui-inline">
					<label class="layui-form-label">排序</label>
					<div class="layui-input-inline" style="width: 100px;">
						<select name="orderBy" id="orderBy" class="layui-select">
							<option value="">请选择</option>
							<option value="是">是</option>
							<option value="否">否</option>
						</select>
					</div>
				</div>
				<input type="button" class="layui-btn" id="souBtn" value="搜索" />
			</form>
		</div>

		<!-- 表格容器 -->
		<table id="demo" lay-filter="test"></table>

		<!-- 表格的头部工具条 -->
		<script type="text/html" id="barDemo1">
			<a class="layui-btn layui-btn" lay-event="add"><i class="layui-icon">&#xe608;</i>创建用户</a>
		</script>

		<!-- 表格的行内工具条 -->
		<script type="text/html" id="barDemo2">
			<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="quanxian"><i class="layui-icon">&#xe653;</i>角色</a>
			<a class="layui-btn layui-btn-xs" lay-event="detail"><i class="layui-icon">&#xe642;</i>编辑</a>
			<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="layui-icon">&#xe640;</i>删除</a>
			<a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="respsw"><i class="layui-icon">&#xe679;</i>密码重置</a>
		</script>

		<!-- 穿梭框容器-->
		<div id="test1" style="display: none;"></div>

		<!-- 添加的弹窗 -->
		<div id="tianjiachuang" style="display: none">
			<form class="layui-form" onsubmit="return false" id="tianjiaForm" lay-filter="tianjiaForm">
				<!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
				<div class="layui-form-item">
					<label class="layui-form-label">用户名</label>
					<div class="layui-input-inline">
						<input type="text" name="loginName" placeholder="请输入" autocomplete="off" class="layui-input">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">密码</label>
					<div class="layui-input-inline">
						<input type="text" name="password" placeholder="请输入" autocomplete="off" class="layui-input">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">邮箱</label>
					<div class="layui-input-inline">
						<input type="text" name="protectEmail" placeholder="请输入" autocomplete="off" class="layui-input">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">手机号</label>
					<div class="layui-input-inline">
						<input type="text" name="protectMtel" placeholder="请输入" autocomplete="off" class="layui-input">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label"></label>
					<div class="layui-input-inline">
						<button class="layui-btn" lay-submit lay-filter="tianjiabtn"><i class="layui-icon">&#xe605;</i>添加</button>
						<button type="reset" class="layui-btn layui-btn-primary"><i class="layui-icon">&#x1006;</i>重置</button>
					</div>
				</div>
			</form>
		</div>

		<!-- 修改的弹窗 -->
		<div id="xiugaichuang" style="display: none">
			<form class="layui-form" onsubmit="return false" id="xiugaiForm" lay-filter="xiugaiForm">
				<div class="layui-form-item">
					<label class="layui-form-label">用户名</label>
					<div class="layui-input-inline">
						<input type="text" name="loginName" placeholder="请输入" autocomplete="off" class="layui-input">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">密码</label>
					<div class="layui-input-inline">
						<input type="text" name="password" placeholder="请输入" autocomplete="off" class="layui-input">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">邮箱</label>
					<div class="layui-input-inline">
						<input type="text" name="protectEmail" placeholder="请输入" autocomplete="off" class="layui-input">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">手机号</label>
					<div class="layui-input-inline">
						<input type="text" name="protectMtel" placeholder="请输入" autocomplete="off" class="layui-input">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">密码</label>
					<div class="layui-input-inline">
						<input type="text" name="password" placeholder="请输入" autocomplete="off" class="layui-input">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label"></label>
					<div class="layui-input-inline">
						<button class="layui-btn" lay-submit lay-filter="xiugaibtn"><i class="layui-icon">&#xe605;</i>修改</button>
						<button type="reset" class="layui-btn layui-btn-primary"><i class="layui-icon">&#x1006;</i>重置</button>
					</div>
				</div>
				<!--  修改的表单中，需要放一个 隐藏域，用来储存id-->
				<input type="hidden" name="id" />

			</form>
		</div>

		<!-- 脚本代码部分 -->
		<script>
			layui.use(['form', 'layer', 'table', 'laydate', 'transfer'], function() {
				var form = layui.form;
				var table = layui.table;
				var layer = layui.layer;
				var $ = layui.$;
				var laydate = layui.laydate;
				var transfer = layui.transfer;

				//执行一个laydate实例
				laydate.render({
					elem: '#beginTime' //指定元素
				});
				laydate.render({
					elem: '#endTime' //指定元素
				});

				//渲染表格
				table.render({
					elem: '#demo', //指定原始表格元素选择器（推荐id选择器）
					page: true, //开启分页
					url: globalData.server + 'user/getUserList', //数据接口
					where: {
						token: globalData.getToken()
					},
					method: "post",
					toolbar: '#barDemo1',
					cols: [
						[ //标题栏
							{
								checkbox: true
							}, {
								field: 'id',
								title: 'id',
								sort: true,
								width: 80
							}, {
								field: 'loginName',
								title: '用户名',
								width: 80
							}, {
								field: 'password',
								title: '密码',
								width: 80
							}, {
								field: 'creatTime',
								title: '创建时间',
								width: 160
							}, {
								field: 'lastLoginTime',
								title: '最后登录时间',
								width: 160
							}, {
								field: 'protectEmail',
								title: '邮箱',
								width: 120
							}, {
								field: 'protectMtel',
								title: '手机号',
								width: 120
							}, {
								field: 'isLockout',
								title: '是否锁定',
								width: 100,
								templet: function(d) {
									if(d.isLockout == '是') {
										return '<input type="checkbox" value="' + d.id + '" name="lock" lay-filter="suoding" title="锁定" checked>'
									} else {
										return '<input type="checkbox" value="' + d.id + '" name="lock" lay-filter="suoding" title="正常" >'
									}
								}
							}, {
								toolbar: '#barDemo2',
								title: '操作'
							}
						]
					]
				});
				//渲染表格--end

				//监听checkbox,实现解锁,锁定
				form.on('checkbox(suoding)', function(data) {
					console.log(data.elem.checked); //是否被选中，true或者false
					console.log(data.value); //复选框value值，也可以通过data.elem.value得到
					var url = "";
					if(data.elem.checked == true) {
						url = globalData.server + "user/lock";
					} else {
						url = globalData.server + "user/unlock";
					}
					$.post(url, {
						"id": data.value,
						"token": globalData.getToken()
					}, function(res) {
						console.log(res);
						if(res.code == 0) {
							layer.msg(res.msg, {
								icon: 1,
								time: 1000
							}, function() {
								layer.closeAll();
								parent.location.reload(); //刷新父页面
							});
						}
					})
				});
				//监听checkbox,实现解锁,锁定--结束

				//搜索按钮的单击事件
				$("#souBtn").click(function() {
					//判断 区间的数据合理性
					if($("#min").val() > $("#max").val()) {
						alert("最高值不得高于起始值");
						return; //结束函数，下面的重载不会再执行
					}

					//表格重载
					table.reload('demo', {
						where: {
							loginName: $("#loginName").val(),
							isLockout: $("#isLockout").val(),
							orderBy: $("#orderBy").val(),
							beginTime: $("#beginTime").val(),
							endTime: $("#endTime").val(),
							min: $("#min").val(),
							max: $("#max").val()
						}
					});
				});
				//搜索按钮的单击事件-end

				//监听头部工具条
				table.on('toolbar(test)', function(obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
					var layEvent = obj.event; //获得 lay-event 对应的值
					if(layEvent === 'add') { //添加
						//弹窗
						layer.open({
							title: "您正在添加用户信息",
							type: 1,
							area: ['800px', '600px'],
							content: $('#tianjiachuang')
						});
					}
				});
				//监听头部工具条--end

				//监听行内工具条
				table.on('tool(test)', function(obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
					var data = obj.data; //获得当前行数据
					var layEvent = obj.event; //获得 lay-event 对应的值
					var tr = obj.tr; //获得当前行 tr 的DOM对象

					var uid = data.id;

					if(layEvent === 'quanxian') { //设置角色
						//弹窗
						layer.open({
							title: "您正在设置角色信息",
							type: 1,
							shadeClose: true,
							area: ['600px', '400px'],
							content: $('#test1')
						});

						//请求服务端，获取数据后。渲染穿梭框
						$.post(globalData.server + "role/getAllRoleList", { //请求，获取所有的角色（左侧）
							"token": globalData.getToken()
						}, function(allRole) {
							if(allRole != null) {
								$.post(globalData.server + "userroles/getRolesByUserId", { //请求，获取此用户所拥有的角色（右侧）
									"uid": uid,
									"token": globalData.getToken()
								}, function(roleByUser) {
									var arr = new Array(); //用来存储右侧的数据（id们）
									for(var i = 0; i < roleByUser.length; i++) {
										arr.push(roleByUser[i].id);
									}

									//渲染穿梭框
									transfer.render({
										elem: '#test1', //绑定元素
										data: allRole, //左侧的数据
										value: arr, //右侧数据（id们）
										id: 'demo1', //定义索引
										parseData: function(res) { //转换格式
											return {
												"value": res.id, //数据值
												"title": res.name //数据标题
											}
										},
										onchange: function(data, index) {
											console.log(data); //得到当前被穿梭的数据
											console.log(index); //如果数据来自左边，index 为 0，否则为 1

											var rids = "";
											for(var i = 0; i < data.length; i++) {
												rids += data[i].value + ",";
											}
											var url = "";
											if(index == 0) {
												url = globalData.server + "userroles/addRolesByUserId";
											} else {
												url = globalData.server + "userroles/delRolesByUserId";
											}

											$.post(url, {
												"uid": uid,
												"rids": rids,
												"token": globalData.getToken()
											}, function(res) {
												console.log(res);
												layer.msg(res.msg, {
													icon: 1,
													time: 1000
												}, function() {
													layer.closeAll();
													parent.location.reload(); //刷新父页面
												});
											})
										}
									}); //渲染穿梭框--结束
								})
							}
						})

					} else if(layEvent === 'detail') { //编辑查看
						console.log(data)
						//数据展示在表单中
						form.val('xiugaiForm', data);
						//弹窗
						layer.open({
							title: "您正在修改用户信息",
							type: 1,
							area: ['800px', '600px'],
							content: $('#xiugaichuang')
						});

					} else if(layEvent === 'del') { //删除
						layer.confirm('真的删除用户信息吗', {
							icon: 7
						}, function(index) {
							obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
							layer.close(index);
							//向服务端发送删除指令
							var url = globalData.server + "user/delUser?token=" + globalData.getToken();
							$.post(url, {
								id: data.id
							}, function(res) {
								layer.alert(res.msg, {
									icon: 1
								}, function() {
									layer.closeAll(); //关闭所有的窗口
									table.reload('demo', {}); //表格重载
								});
							}, "json");
						});
					} else if(layEvent === 'respsw') { //重置
						layer.confirm('真的要重置用户密码吗', {
							icon: 3,
							title: '您正在重置用户密码信息'
						}, function(index) {
							//obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
							layer.close(index);
							//向服务端发送重置指令
							var url = globalData.server + "user/resetPsw?token=" + globalData.getToken();
							$.post(url, {
								id: data.id
							}, function(res) {
								layer.alert(res.msg, {
									icon: 1
								}, function() {
									layer.closeAll(); //关闭所有的窗口
									table.reload('demo', {}); //表格重载
								});
							}, "json");
						});
					}
				});
				//监听行内工具条---end

				//添加提交的 监听
				form.on('submit(tianjiabtn)', function(data) {
					var url = globalData.server + "user/addUser?token=" + globalData.getToken();
					$.post(url, data.field, function(res) {
						if(res.code != 1) {
							layer.alert("添加成功", {
								icon: 1
							}, function() {
								layer.closeAll(); //关闭所有的窗口
								table.reload('demo', {}); //表格重载
							});
						}
					}, "json");

					return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
				});
				//添加提交的 监听---end

				//修改提交的监听
				form.on('submit(xiugaibtn)', function(data) {
					var url = globalData.server + "user/updateUser?token=" + globalData.getToken();
					$.post(url, data.field, function(res) {
						layer.alert(res.msg, {
							icon: 6
						}, function() {
							layer.closeAll(); //关闭所有的窗口
							table.reload('demo', {}); //表格重载
						});
					}, "json");

					return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
				});
				//修改提交的监听--end

			});
		</script>

	</body>

</html>